<template>
  <div class="pd-20">
    <el-input v-model="searchCondition"
              placeholder="请输入用户姓名/电话"
              class="w-200"
              clearable
              @clear="query"/>
    <el-select v-model="hospitalId"
               filterable
               clearable
               remote
               :remote-method="remoteMethod1"
               placeholder="请选择机构"
               :loading="loading"
               class="input_1">
      <el-option v-for="(option, index) in options1"
                 :value="option.name"
                 :key="index">{{ option.name }}
      </el-option>
    </el-select>
    <el-select v-model="deviceId"
               filterable
               clearable
               remote
               :remote-method="remoteMethod"
               placeholder="请选择检测项目"
               :loading="loading1"
               class="input_1"
               @on-clear="query">
      <el-option v-for="(option, index) in deviceList"
                 :value="option.name"
                 :key="index">{{ option.name }}
      </el-option>
    </el-select>
    <el-datePicker type="date"
                   v-model="startTime"
                   placeholder="起始日期"
                   value-format="yyyy-MM-dd"
                   class="datePicker_1"></el-datePicker>
    <el-datePicker type="date"
                v-model="endTime"
                placeholder="截止日期"
                value-format="yyyy-MM-dd"
                class="datePicker_1"></el-datePicker>
    <el-button type="primary"
               @click="query">查 询
    </el-button>
    <el-button type="primary"
               @click="exportExcel">导 出
    </el-button>
    <el-table stripe
              :data="dataList"
              style="width: 100%"
              class="mt-20"
              border
              :span-method="handleSpan">
      <el-table-column align="center"
                       label="图标"
                       width="100px"
                       heitht="50px">
        <template slot-scope="scope">
          <el-image :src="scope.row.imageUrl"
                    :preview-src-list="[scope.row.imageUrl]">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       prop="deviceName"
                       label="名称"
                       min-width="100">
      </el-table-column>
      <el-table-column align="center"
                       prop="userName"
                       label="用户名"
                       min-width="120">
      </el-table-column>
      <el-table-column align="center"
                       prop="phone"
                       label="电话号码"
                       min-width="120">
      </el-table-column>
      <el-table-column align="center"
                       prop="hospitalName"
                       label="检测机构"
                       min-width="120">
      </el-table-column>
      <el-table-column align="center"
                       prop="detectData"
                       label="项目名称"
                       min-width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.detectData != ''">{{ scope.row.detectData.name }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       prop="detectData"
                       label="检测值"
                       min-width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.detectData != ''">{{ scope.row.detectData.value }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       prop="detectData"
                       label="检测结果"
                       min-width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.detectData != ''">{{ scope.row.detectData.result }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center"
                       prop="clientTime"
                       label="检测时间"
                       min-width="120"
                       :formatter="formatterDate">
      </el-table-column>
    </el-table>
    <page @getList="initTableData"
          :pageTotal="totals"
          ref="page"></page>

  </div>
</template>

<script>
import Page from '@/base/page/page'
import {mapGetters} from 'vuex'

export default {
  name: "detectList",
  data() {
    return {
      searchCondition: '',
      hospitalId: null,
      options1: [],
      deviceId: null,
      loading1: true,
      deviceList: [],
      totals: 0,
      pageSize: 20,
      dataList: [],
      startTime: null,
      endTime: null,
      loading: false,
    }
  },
  created() {
    this.initTableData();
  },
  methods: {
    handleSpan({row, column, rowIndex, columnIndex}) {
      if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2 || columnIndex === 3 || columnIndex === 4 || columnIndex === 8) {
        if (row.rowspan) {
          if (row.rowspan == -1) {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
          if (row.rowspan > 1) {
            return {
              rowspan: row.rowspan,
              colspan: 1
            };
          }
        } else {
          return {
            rowspan: 1,
            colspan: 1
          };
        }

      }
    },
    remoteMethod(query) {
      if (query !== '') {
        this.loading1 = true;
        this.post(this.api.deviceList.url, {"pageSize": 20, "pageStart": 0, "name": query}).then((res) => {
          this.deviceList = res.data.object;
        });
      } else {
        this.options1 = [];
      }
      this.loading1 = false;
    },


    remoteMethod1(query) {
      if (query !== '') {
        this.loading1 = true;
        this.post(this.api.searchHospital, {"pageSize": 20, "pageStart": 0, "name": query}).then((res) => {
          this.options1 = res.data.object;
        });
      } else {
        this.options1 = [];
      }
      this.loading1 = false;
    },
    query() {
      this.page.pageIndex = 0;
      this.initTableData();
    },
    initTableData() {
      let start = null;
      if (this.startTime) {
        start = this.startTime.getFullYear() + "-" + (this.startTime.getMonth() + 1) + "-" + this.startTime.getDate();
      }
      let end = null;
      if (this.endTime) {
        end = this.endTime.getFullYear() + "-" + (this.endTime.getMonth() + 1) + "-" + this.endTime.getDate();
      }
      let param = {
        searchCondition: this.searchCondition,
        startTime: start,
        endTime: end,
        pageSize: this.page.pageSize,
        pageIndex: this.page.pageIndex,
        hospitalId: this.hospitalId,
        deviceId: this.deviceId
      };
      this.post(this.api.apparatus.getAllPageApp, param).then((res) => {
        if (res.data.code === '200') {
          this.dataList = res.data.object;
          this.totals = res.data.totalNum;
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },
    formatterDate(row) {
      return this.commonFunction.timestampFormat(new Date(row.clientTime), 'yyyy-MM-dd hh:mm:ss')
    },
    exportExcel() {
      let start = null;
      if (this.startTime) {
        start = this.startTime.getFullYear() + "-" + (this.startTime.getMonth() + 1) + "-" + this.startTime.getDate();
      }
      let end = null;
      if (this.endTime) {
        end = this.endTime.getFullYear() + "-" + (this.endTime.getMonth() + 1) + "-" + this.endTime.getDate();
      }
      let param = {
        name: this.searchCondition,
        startTime: start,
        endTime: end,
        pageSize: this.page.pageSize,
        pageIndex: this.page.pageIndex,
        hospitalId: this.hospitalId,
        deviceId: this.deviceId
      };
      this.loading = true
      this.loadingText = '正在导出数据...'
      this.$axios({
        url: this.api.apparatus.export,
        method: 'post',
        responseType: 'blob', // 服务器返回的数据类型
        params: param,
        data: param
      }).then((res) => {
        this.loading = false
        const content = res.data
        const blob = new Blob([content]) // 构造一个blob对象来处理数据
        const fileName = '检测数据导出.xls' // 导出文件名
        if ('download' in document.createElement('a')) { // 支持a标签download的浏览器
          const link = document.createElement('a') // 创建a标签
          link.download = fileName // a标签添加属性
          link.style.display = 'none'
          link.href = URL.createObjectURL(blob)
          document.body.appendChild(link)
          link.click() // 执行下载
          URL.revokeObjectURL(link.href) // 释放url
          document.body.removeChild(link) // 释放标签
        } else { // 其他浏览器
          navigator.msSaveBlob(blob, fileName)
        }
      }).catch((error) => {
        this.loading = false
      })
    },
  },
  computed: {
    ...
      mapGetters([
        'page'
      ])
  },
  components: {
    Page,
  }
}
</script>

<style scoped>
</style>
